@import "./../../../src/styles/base";

.avatar {
  width: tovw(100);
  height: tovw(100);
  border: 1px solid white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  &.online::after {
    content: "";
    display: block;
    width: tovw(30);
    height: tovw(30);
    background: url("//activity.icocofun.com/live/uploads/6604566c-23a7-ef53-d0ac-c498c16a5e0f.png") center / 100% no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  &.avatar-left {
    left: tovw(55);
  }

  &.avatar-right {
    right: tovw(55);
  }
}

.pk-list {
  background-color: white;
  padding-top: tovw(40);

  .list-item {
    padding-bottom: tovw(32);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .list-bg {
      width: tovw(670);
      height: tovw(160);
      background: url("//activity.icocofun.com/live/uploads/pk-bg-rect.png") center center / 100% no-repeat;
      position: relative;

      .tooltip {
        font-size: tovw(18);
        font-weight: 500;
        color: #3D3131;
        line-height: tovw(23);
        position: absolute;
        top: -8vw;
        left: 2vw;
        min-width: tovw(200);
        height: tovw(72);
        box-shadow: 0 4px 4px 1px rgba(0, 0, 0, 0.16);
        background: linear-gradient(180deg, #ECECEC 0%, #FFFFFF 100%);
        border-radius: tovw(17);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: tovw(10);

        p {
          white-space: nowrap;
        }

        &::after {
          content: "";
          display: block;
          width: 0;
          height: 0;
          position: absolute;
          bottom: -4vw;
          left: 1.5vw;
          border: tovw(20) solid transparent;
          border-top: tovw(20) solid rgba(255, 255, 255, 0.98);
        }
      }

      .avatar-right {
        .tooltip {
          left: -18vw;

          &::after {
            left: 20vw;
          }
        }
      }
    }

    .progress {
      width: tovw(670);
      height: tovw(30);
      border-radius: tovw(30);
      background: #ccc;
      position: relative;
      overflow: hidden;
      margin-top: tovw(4);

      .progress-left {
        height: 100%;
        position: absolute;
        left: 0;
        background: linear-gradient(180deg, #75B5FF 0%, #0479FF 71.87%, #73B4FF 100%);
      }

      .progress-right {
        height: 100%;
        position: absolute;
        right: 0;
        background: linear-gradient(180deg, #FF7AA9 0%, #FF206F 64.58%, #FF8FB7 100%);
      }

      .diamond {
        font-size: tovw(22);
        font-weight: bold;
        color: #FFFFFF;
        line-height: tovw(26);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

        &.diamond-left {
          left: tovw(20);
          padding-left: tovw(25);
          background: url("//activity.icocofun.com/live/uploads/diamond-white.png") left center / tovw(22) no-repeat;
        }

        &.diamond-right {
          right: tovw(20);
          padding-right: tovw(25);
          background: url("//activity.icocofun.com/live/uploads/diamond-white.png") right center / tovw(22) no-repeat;
        }
      }
    }
  }
}

.host-list {
  background: rgba(239, 98, 148, 1);

  &.host-top {
    .title {
      font-size: tovw(28);
      font-weight: 800;
      color: #FFFFFF;
      line-height: tovw(24);
      height: tovw(98);
      background: linear-gradient(180deg, #FFBBD3 0%, rgba(239, 98, 148, 0) 100%);
      border-radius: tovw(37);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: tovw(20) 0;
    }
  }

  .list-item {
    margin: 1px;
  }

  .list-content {
    height: tovw(140);
    border-radius: tovw(10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;

    &.hasTooltip {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .rank {
      font-size: tovw(28);
      font-weight: 800;
      color: #3D3131;
      line-height: tovw(30);
      width: tovw(106);
      height: tovw(106);
      background: center / 100% no-repeat;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 tovw(106);

      &.rank-0 {
        background-image: url("./images/top1.png");
      }

      &.rank-1 {
        background-image: url("./images/top2.png");
      }

      &.rank-2 {
        background-image: url("./images/top3.png");
      }
    }

    .avatar {
      width: tovw(100);
      height: tovw(100);
      border: tovw(2) solid #FFB660;
      flex: 0 0 tovw(100);
      position: relative;
      top: 0;
      transform: none;
    }

    .user-info {
      .name {
        width: 40vw;
        font-size: tovw(30);
        font-weight: 500;
        color: #3D3131;
        line-height: tovw(36);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .diamond {
        height: tovw(32);
        font-size: tovw(26);
        font-weight: 400;
        color: rgba(61, 49, 49, 0.6);
        line-height: tovw(32);
        padding-left: tovw(30);
        background: url('//activity.icocofun.com/live/uploads/diamond.png') left center / tovw(25) no-repeat;
      }
    }

    .look-btn {
      padding-right: tovw(40);
      button {
        width: tovw(140);
        height: tovw(60);
        font-size: tovw(28);
        font-weight: bold;
        color: #FFFFFF;
        line-height: tovw(32);
        background: url('./images/little-btn.png') center / 100% no-repeat;

        &[disabled] {
          background-image: url('./images/little-btn-disabled.png')
        }
      }
    }
  }

  .tooltip {
    height: tovw(56);
    background: linear-gradient(179deg, #FFF5D1 28%, #FFC188 100%);
    font-size: tovw(22);
    font-weight: 500;
    color: #3D3131;
    line-height: tovw(56);
    display: flex;
    align-items: center;
    border-bottom-left-radius: tovw(10);
    border-bottom-right-radius: tovw(10);
    position: relative;
    border-top: 1px solid #EDC4CC;

    div {
      margin-right: tovw(70);
      margin-left: tovw(25);
    }

    &::after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      bottom: tovw(54);
      left: tovw(45);
      border: tovw(20) solid transparent;
      border-bottom: tovw(20) solid rgba(255, 245, 209, 1);
    }

    &::before {
      content: "";
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      bottom: tovw(55);
      left: tovw(45);
      border: tovw(21) solid transparent;
      border-bottom: tovw(21) solid #EDC4CC;
    }
  }
}

.pk-modal {
  width: 100vw;

  .modal-content {
    padding: 0;
  }

  .modal-body {
    width: auto !important;
    background: transparent !important;
  }

  .pk-modal-content {
    width: 100vw;
    height: tovw(426);
    background: url("//activity.icocofun.com/live/uploads/pk-bg-flat.png") center center / 100% no-repeat;
    position: relative;

    .avatar {
      width: tovw(150);
      height: tovw(150);
      top: 40%;
    }

    .name {
      text-align: center;
      font-size: tovw(24);
      font-weight: 500;
      color: #FFFFFF;
      line-height: tovw(26);
      margin-top: tovw(16);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pk-btn {
      font-size: tovw(35);
      font-weight: 800;
      color: #FFFFFF;
      width: tovw(488);
      height: tovw(80);
      background: url("//activity.icocofun.com/live/uploads/520-big-btn-bg.png") center center / 100% no-repeat;
      position: absolute;
      bottom: tovw(30);
      left: 50%;
      transform: translateX(-50%);
    }

    .timeDown {
      color: white;
      font-size: tovw(34);
      width: tovw(130);
      height: tovw(52);
      line-height: tovw(52);
      background: rgba(0, 0, 0, 0.4);
      border-radius: tovw(37);
      position: absolute;
      top: tovw(32);
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
    }
  }
}

.pk-entry {
  width: tovw(240);
  height: tovw(240);
  background: url('//activity.icocofun.com/live/uploads/520-top-win-bg-btn.png') center/100% no-repeat;
  position: relative;

  .info {
    font-size: tovw(26);
    font-weight: 800;
    color: #FFFFFF;
    line-height: tovw(32);
    position: absolute;
    top: tovw(110);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
  }

  .btn {
    font-size: tovw(26);
    font-weight: 800;
    color: #FFFFFF;
    line-height: tovw(32);
    background: transparent;
    position: absolute;
    bottom: tovw(16);
    left: 50%;
    transform: translateX(-50%);
  }
}

.host-entry {
  width: tovw(240);
  height: tovw(240);
  background: url('//activity.icocofun.com/live/uploads/520-top-win1.png') center/100% no-repeat;
  position: relative;

  .avatar {
    width: tovw(88);
    height: tovw(88);
    top: 24.5vw;
    left: tovw(27);
  }

  .info {
    font-size: tovw(20);
    color: #FFFFFF;
    line-height: tovw(32);
    position: absolute;
    top: 19vw;
    left: 70%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;

    .rank {
      font-size: tovw(30);
      font-weight: 800;
      color: #EF6294;
      width: tovw(80);
      height: tovw(40);
      line-height: tovw(40);
      background: #FFFFFF;
      border-radius: tovw(36);
      margin: auto;
    }
  }
}
